/******************************************************************************************
 * Import
 ******************************************************************************************/

// module
import Taro, { Component } from '@tarojs/taro'
import { Picker, Input, Switch } from '@tarojs/components'

// project
import { CPage, CContent, CHeader, CFooter, CFloat, CAround, CBetween, CCenter, CRow, CWrap, CLine, CHand, CItemX, CItemY, CText, CLabel, CSvg, CImage, CButton, CColumn } from '../../library/comp';
import { Base64, Gen, Time, Zip, Session, Storage, Toast} from '../../library/func';
import Icon from '../../project/style/icon';
import Http from '../../project/func/http/http';
import time from '../../project/func/util'
import { Addcbtn, Cbtn, Chead, Destop, Editcunit, Ibottom, Ibottomp, Listunitone, Listunittwo, LogoLine, LogoLinep, Tabheader } from '../../project/comp'

/******************************************************************************************
 * Export Class
 ******************************************************************************************/

export default class HomeIndex extends Component {

	constructor(props) {
		super(props);

		/**
		 * state
		 */
		this.state = {
			// 获取屏幕高度
            scrollHeight: wx.getSystemInfoSync().windowHeight,
            // 选中的日期
            selectDate: '09-12',
            // 收费选项
            selector:['免费','收费'],
            charge: '请选择收费标准',
            // 开始日期
            startDate: new Date(),
            // 结束日期
            endDate: '09-15',
            // 活动类型
            activityList:['线上活动','线下活动'],
            
            // 开始时间
            startTime: '13:15',
            // 结束时间
            endTime: '13:15',

            // 操作类型
            type:'save',
            // 活动类型
            enumType:'请选择活动类型',
            // 活动标题
            set_title:'',
            // 活动地址
            address:'',
            // 活动费用
            cost: '',
            // 活动限制报名人数
            limit:'',
            // 开始时间 包括年份，用于计算时间戳
            starStamp:'',
            // 结束时间 包括年份，用于计算时间戳
            endStamp:'',
            // 活动封面
            set_cover:'',
            // 活动内容
            set_content:'',
            submitstr: '下一步',
            id: 0
		}
	}
	/*------------------------------------------------------------------------------------
	 * 声明周期
	 *-----------------------------------------------------------------------------------*/
    // willMount
    componentWillMount(){


        // 获取当前时间
        let now = new Date();
        let Syear = now.getFullYear();
        let Smonth = now.getMonth()+1;
        let Sday = now.getDate();
        let Stime = now.toTimeString().substr(0,5);

        // 获取 一小时 之后时间
        let end = new Date(now.getTime()+3600000);
        let Eyear = end.getFullYear();
        let Emonth = end.getMonth()+1;
        let Eday = end.getDate();
        let Etime = end.toTimeString().substr(0,5);

        // 月份日期补0
        Smonth <10 && (Smonth = '0'+Smonth)
        Sday <10 && (Sday = '0'+Sday)
        Emonth <10 && (Emonth = '0'+Emonth)
        Eday <10 && (Eday = '0'+Eday)

        let Sdate = Syear+'-'+Smonth+'-'+Sday;
        let Edate = Eyear+'-'+Emonth+'-'+Eday;
        
        // 时间数据赋值
        this.setState({
            startDate:Sdate,
            startTime:Stime,
            endDate:Edate,
            endTime:Etime,
            starStamp:now,
            endStamp:end,
            // 接收 标题、封面、内容 参数
            // title:this.$router.params.title ? this.$router.params.title : '',
            // cover:this.$router.params.cover ? this.$router.params.cover : '',
            content:this.$router.params.content ? this.$router.params.content : [
                {type: "image", content: "XXXXX"},
                {type: "text", content: "XXXXX"},
                {type: "video", content: "XXXXX"}
                ],
        })

	}

    // willMount
	componentDidMount(){
        
        // this.setState({
        //     id: this.$router.params.id
        // })

    }
    
    componentDidShow(){

        if(Session.get("activity_data") != null){
			this.setState(
				Session.get("activity_data"),()=>{
					Session.set("activity_data", null)
				}
            )
            this.setState({
                submitstr: '完成'
            })
		}
    }

    // getdata = ()=> {
    //     Http.Loading({
    //         url: 'activity/detail.php?id='+ this.state.id,
    //         success: (data)=>{
    //             console.log('******************',data)
    //             this.setState({
                    
    //             })
    //         }
    //     })
    // }

    /*------------------------------------------------------------------------------------
	 * 事件处理
	 *-----------------------------------------------------------------------------------*/
    // onRedirect
    onRedirect(url){
        wx.redirectTo({
            url: url
        })
    }
    // onNavigate
    onNavigate(url){
        wx.navigateTo({
            url: url
        })
    }
    //onNavigateBack
    onNavigateBack(num=1){
        wx.navigateBack({
            delta: num
        })                    
    }
    
    /*------------------------------------------------------------------------------------
	 * 自定义方法
	 *-----------------------------------------------------------------------------------*/
    // 提交接口
    httpPost = (type)=>{
        Http.post({
            url:'activity/logic/add.php',
            data:{
                type:type,
                enum_type:this.state.enumType,
                set_title:this.state.set_title,
                set_address:this.state.address,
                set_cost:this.state.cost,
                set_limit:this.state.limit,
                time_start:Date.parse(new Date(this.state.starStamp))/1000,
                time_end:Date.parse(new Date(this.state.endStamp))/1000,
                set_cover:this.state.set_cover,
                set_content:this.state.set_content
            },
            success:(data)=>{
                console.log('dataaaaaaaaaaaaaaaaaaaaa',data)
                Toast.text('发布成功');
                setTimeout(()=>{
                    this.onNavigateBack()
                },1500)
            }
        })
    }
    // 点击发布
    postSubmit = () => {
        // if(this.state.charge == '收费' && this.state.cost == '0'){
        //     Toast.text('收费金额不能为 0');
        // }else if(this.state.limit == '0'){
        //     Toast.text('参与人数不能为 0');
        // }else{
        //     // console.log(
        //     //     'this.state.enumType:',this.state.enumType,
        //     //     '\nthis.state.charge:',this.state.charge,
        //     //     '\nthis.state.title:',this.state.title,
        //     //     '\nthis.state.address:',this.state.address,
        //     //     '\nthis.state.cost:',this.state.cost,
        //     //     '\nthis.state.limit:',this.state.limit,
        //     //     '\nthis.state.cover:',this.state.cover,
        //     //     '\nthis.state.content:',this.state.content
        //     // );
            
        //     this.state.enumType != '请选择活动类型' && this.state.charge != '请选择收费标准' &&
        //     // this.state.title != '' &&
        //     this.state.address != '' &&
        //     this.state.limit != '' &&
        //     // this.state.cover != '' &&
        //     this.state.content != []  ? this.httpPost('publish') : Toast.text('请完善信息')
        // }
        if(this.state.enumType == '请选择活动类型' && this.state.address == '' && this.state.limit == ''){
            Toast.text('请完善信息')
            return
        }
        if(this.state.charge == '收费' && this.state.cost == '0'){
            Toast.text('收费金额不能为 0')
            return
        }
        if(this.state.submitstr == '下一步'){
            this.onNavigate('/screen/add/list?type=activity')
        }else{
            this.httpPost('publish')
        }
        
    }
    
    // 日期选择
    selectDate = (type, e)=> {
        if(type == 'startDate'){
            // console.log('*********************************',e.detail.value)
            // let date = e.detail.value.toString().substr(5)
            this.setState({
                startDate: e.detail.value,
                starStamp:e.detail.value+' '+this.state.startTime
            })
        }
        if(type == 'startTime'){
            this.setState({
                startTime: e.detail.value
            })
        }
        if(type == 'endDate'){
            // let date = e.detail.value.toString().substr(5)
            this.setState({
                endDate: e.detail.value,
                endStamp:e.detail.value+' '+this.state.endTime
            })
        }
        if(type == 'endTime'){
            this.setState({
                endTime: e.detail.value
            })
        }
    }

    // 收费标准选择
    charge = (e)=> {
        if(this.state.selector[e.detail.value] == '免费'){
            this.setState({
                charge: this.state.selector[e.detail.value],
                cost:0
            })
        }
        if(this.state.selector[e.detail.value] == '收费'){
            this.setState({
                charge: this.state.selector[e.detail.value]
            })
        }
        
    }

    // 活动类型选择
    enumType = e => {
        this.setState({
            enumType:this.state.activityList[e.detail.value]
        })
    }

    // input 绑定值
    changeInput(key,e){
        this.setState({
            [key]:e.detail.value
        })
    }

	/**
	 * 渲染
	 */
	render() {

		// 渲染
		return (
			<CPage>
				<CContent bg='#fff' h={this.state.scrollHeight + 'px'} >
                    {/* 添加活动 */}
                    <CColumn>
                        {/* 开始时间和结束时间 */}
                        <CRow bb='1 solid #dedede' px='10'>
                            <CColumn>
                                {/* 开始时间 */}
                                <CBetween mt='10' y='center' x='right'>
                                    <CLine y='center' style='flex:0.5'>
                                        <CSvg icon={Icon.time} color='#979797' w='19' h='19' color='#7f7f7f' ml='3'></CSvg>
                                        <CText color='#8b8b8b' size='14' ml='8'>开始时间</CText>
                                    </CLine>
                                    <CLine style='flex:0.9' x='right'>
                                        <CText size='14' mr='4' color='#7d7d7d'>日期</CText>
                                        <Picker
                                            mode='date'
                                            onChange={this.selectDate.bind(this, 'startDate')}
                                            fields = 'day'
                                        >
                                            <CHand ba='1 solid #e0e0e0' px='4' mr='6' size='14' color='#ba9e37'>{this.state.startDate}</CHand>
                                        </Picker>
                                        <CText size='14' mr='4' color='#7d7d7d'>时间</CText>
                                        <Picker
                                            mode='time'
                                            onChange={this.selectDate.bind(this, 'startTime')}
                                            fields = 'day'
                                        >
                                            <CHand ba='1 solid #e0e0e0' px='4' mr='6' size='14' color='#ba9e37'>{this.state.startTime}</CHand>
                                        </Picker>
                                    </CLine>
                                </CBetween>

                                {/* 结束时间 */}
                                <CBetween mt='12' y='center'  mb='14'>
                                    <CLine y='center' style='flex:0.5'>
                                        {/* <CSvg icon={Icon.home} w='20' h='20' color='#7f7f7f'></CSvg> */}
                                        <CText color='#8b8b8b' size='14' ml='29'>结束时间</CText>
                                    </CLine>
                                    <CLine style='flex:0.9'  x='right'>
                                        <CText size='14' mr='4' color='#7d7d7d'>日期</CText>
                                        <Picker
                                            mode='date'
                                            onChange={this.selectDate.bind(this, 'endDate')}
                                            fields = 'day'
                                        >
                                            <CHand ba='1 solid #e0e0e0' px='4' mr='6' size='14' color='#ba9e37'>{this.state.endDate}</CHand>
                                        </Picker>
                                        <CText size='14' mr='4' color='#7d7d7d'>时间</CText>
                                        <Picker
                                            mode='time'
                                            onChange={this.selectDate.bind(this, 'endTime')}
                                            fields = 'day'
                                        >
                                            <CHand ba='1 solid #e0e0e0' px='4' mr='6' size='14' color='#ba9e37'>{this.state.endTime}</CHand>
                                        </Picker>
                                    </CLine>
                                </CBetween>
                            </CColumn>
                        </CRow>

                        {/* 活动类型 */}
                        <CRow px='10' py='8' y='center' h='28' lh='28' bb='1 solid #dedede'>
                            <CSvg icon={Icon.flagaf} color='#979797' w='18' h='20' color='#7f7f7f' ml='4' mr='8'></CSvg>
                            <Picker
                                mode='selector'
                                range={this.state.activityList}
                                style='width:100%'
                                onChange={this.enumType}
                            >
                                {
                                    this.state.enumType == '请选择活动类型' ? (
                                        <CHand color='#8b8b8b' size='14'>{this.state.enumType}</CHand>
                                    ) : (
                                        <CHand color='#333' size='14'>{this.state.enumType}</CHand>
                                    )
                                }
                                
                            </Picker>
                        </CRow>

                        {/* 地址 */}
                        <CRow px='10' py='8' y='center' h='28' lh='28' bb='1 solid #dedede'>
                            <CSvg icon={Icon.address} color='#979797' w='24' h='24' color='#7f7f7f' mr='6'></CSvg>
                            <Input
                                placeholder='地址'
                                placeholderStyle='color:#8b8b8b;font-size:30rpx'
                                style='font-size:30rpx; width:100%;color:#333;'
                                onChange={this.changeInput.bind(this,'address')}
                            />
                        </CRow>

                        {/* 免费 */}
                        <CRow px='10' py='8' h='28' lh='28' bb='1 solid #dedede'>
                            <CSvg icon={Icon.goldc} color='#979797' w='20' h='20' color='#7f7f7f' mr='9' ml='1' df></CSvg>
                            <Picker
                                mode='selector'
                                range={this.state.selector}
                                style='width:100%;flex:1'
                                onChange={this.charge}
                            >
                                {this.state.charge == '请选择收费标准' ? <CHand color='#8b8b8b' size='14'>{this.state.charge}</CHand>:<CHand color='#333' size='14'>{this.state.charge}</CHand>}
                                {/*{this.state.charge == '免费' &&  <CText color='#8b8b8b' size='14'>免费</CText>}*/}
                            </Picker>
                           
                            {this.state.charge == '收费' && 
                            <CHand style='flex:0.3;'>
                                <Input
                                    value={this.state.cost == 0 ? ' ' : this.state.cost}
                                    type='digit'
                                    placeholderStyle='color:#ba9e37;font-size:28rpx'
                                    style='font-size:28rpx; width:100%;color:#ba9e37;height:40rpx;flex:1;text-align:right;border-bottom: 2rpx solid #dcce9a;padding-left:6rpx;padding-right:6rpx;'
                                    onChange={this.changeInput.bind(this,'cost')}
                                />
                                <CHand size='12' color='#8b8b8b' ml='5' y='bottom'>元</CHand>
                            </CHand>
                            }
                        </CRow>

                        {/* 人数限制 */}
                        <CRow px='10' py='8' h='28' lh='28' bb='1 solid #dedede'>
                            <CSvg icon={Icon.minetwo} color='#979797' w='25' h='25' color='#7f7f7f' mr='6'></CSvg>
                            <Input
                                placeholder='人数限制'
                                type='number'
                                placeholderStyle='color:#8b8b8b;font-size:28rpx'
                                style='font-size:28rpx; width:100%;color:#333;'
                                onChange={this.changeInput.bind(this,'limit')}
                            />
                        </CRow>

                        {/* 编辑内容 */}
                        {/* <CRow px='10' py='8' h='28' lh='28' bb='1 solid #dedede' onClick={this.onNavigate.bind(this,'/screen/add/list')}>
                            <CSvg icon={Icon.add} color='#979797' w='25' h='25' color='#7f7f7f' mr='6'></CSvg>
                            {
                                this.state.title =='' ?
                                    <CHand color='#8b8b8b' size='14'>编辑内容</CHand>
                                :
                                    <CHand color='#333' size='14'>{this.state.set_title.length > 25 ? this.state.set_title.substr(0,25)+'...' : this.state.set_title}</CHand>
                            }
                        </CRow> */}

                    </CColumn>
				</CContent>

                {/* 底部按钮 */}
                <Cbtn text={this.state.submitstr} onDosome={this.postSubmit} ></Cbtn>
			</CPage>
		);
	}
};